<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="prc" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改动态</title>
<style type="text/css">
    .imgList {
        position: relative;
        display: inline-block;
    }

    .imgList .remove {
    color:white;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .7);
    }
form {
	padding-top: 80px;
}
#load{
margin: 0 auto;
} 
.ui_button {
                display: inline-block;
                line-height: 45px;
                padding: 0 70px;
                color: #FFFFFF;
                font-family: "微软雅黑";
                font-weight: 700;
                cursor: pointer;
            }
            .ui_button_primary {
                background-color: #7CD5EA;
            }
            label.ui_button:hover {
                background-color: #0286c6;
            }
    </style>
</head>
<body>
<%@include file="header.jsp" %>
<div style="width: 1100px;margin: 0 auto;">
	<form action="${prc }/updatestrategy" method="post"
		enctype="multipart/form-data">
		<input type="hidden" name="id" value="${strategy.id }">
		<h4>主题：</h4>
		<input type="text" name="themes" value="${strategy.themes }" placeholder="${strategy.themes }"><br>
		<h4>攻略：</h4>
		<textarea id="qianyue-area" maxlength="1000" name="describes"   placeholder="${strategy.describes }" rows="10"
			cols="120" style="word-wrap: break-word;">${strategy.describes }</textarea><i><span class="count-change">0</span>/1000</i>
		<br>
		<h4>景点地址：</h4>${strategy.address }
		<select id="pro" onchange="ChangeProvinceSelect(this.selectedIndex)"></select>
		<select id="ci" name="address">
			<option>${strategy.address }</option>
		</select><br>
		<h4>旅行记录：</h4>
		<c:forEach var="limg" items="${strategy.listimg }">
		<img alt="" src="${prc }/img/${limg.img}" style="width: 100px;height: 100px;">
		</c:forEach><br>
		<label class="ui_button ui_button_primary" for="load">修改图片</label>
		<input id="load" type="file" class="btn btn-primary" name="listimgs"  style="position:absolute;clip:rect(0 0 0 0);"
		accept="image/png, image/jpeg,image/jpg" onchange="upload(this.files)" multiple/>
            <div id="huixian"></div>
            
	    <button type="submit"  class="btn btn-default">修改</button>
	</form>
	</div>
</body>
<script type="text/javascript">
function getobj(obj) { return document.getElementById(obj); }
var str = "";
var imgArr = [];

function upload(f) {
    for (var i = 0; i < f.length; i++) {
        imgArr = [];
        var reader = new FileReader();
        reader.readAsDataURL(f[i]);
        imgArr.push[f];
        reader.onload = function(e) {
            str += '<div class="imgList"><span class="remove">remove</span><img class="img" src="' 
            + e.target.result + '"/ style="width:100px;height: 100px;margin:0 5px 0 5px"></div>';
            getobj("huixian").innerHTML = str;
        }
    }
}
$("#huixian").off("click").on("click", ".remove", function() {
    $(this).parent().remove();
    imgArr.splice(0, $(this).parent().index(".imgList"));
}) 
//监测从后台获取的可编辑文字、键盘输入的文字字数的变化，并赋值给span
$(function () {
    var text = $('#qianyue-area').val();
    var len = text.length;
    $('#qianyue-area').next().find('span').html(len);
    $('textarea').keyup(function () {
        var text = $(this).val();
        len = text.length;
        if (len > 1000) {
            return false;
        }
        $(this).next().find('span').html(len);
    })
});
	var province = ["请选择","北京市","上海市","天津市","重庆市","河北省","山西省","辽宁省","吉林省","黑龙江省",
	                "江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省",
	                "广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省",
	                "广西壮族自治区","内蒙古自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区"];
	var city = [
		["请选择"],
		["北京市区","北京市辖区"],
		["上海市区","上海市辖区"],
		["天津市区","天津市辖区"],
		["重庆市区","重庆市辖区"],
		["石家庄", "唐山市", "邯郸市", "秦皇市岛", "保市定", "张家市口", "承德市", "廊坊市", "沧州市", "衡水市", "邢台市"],
		["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"],
		["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"],
		["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边州","长白山管委会"],
		["哈尔滨市","齐齐哈尔市","大庆市","佳木斯市","牡丹江市","七台河市","双鸭山市","黑河市","鸡西市","伊春市","绥化市","鹤岗市","加格达奇市"],
		["南京市","苏州市","无锡市","常州市","南通市","扬州市","镇江市","泰州市","盐城市","连云港市","宿迁市","淮安市","徐州市"],
		["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"],
		["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"],
		["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"],
		["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"],
		["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","菏泽市"],
		["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市"],
		["武汉市","黄石市","十堰市","荆州市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","黄冈市","咸宁市","随州市"],
		["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市"],
		["广州市","深圳市","珠海市","汕头市","韶关市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"],
		["三亚市","海口市","文昌市","琼海市","万宁市","五指山市","东方市","儋州市"],
		["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市"],
		["贵阳市","六盘水市","遵义市","安顺市"],
		["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","普洱市","临沧市","大理市"],
		["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"],
		["兰州市","金昌市","白银市","天水市","嘉峪关市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市"],
		["西宁市"],
		["台北市","高雄市","基隆市","台中市","台南市","新竹市","嘉义市"],
		["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"],
		["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市"], 
		["拉萨市"],
		["银川市","石嘴山市","吴忠市","固原市","中卫市"],
		["乌鲁木齐市","克拉玛依市"],
		["香港特别行政区"],
		["澳门特别行政区"]
	];
	//new Array()    
	var pro = document.getElementById("pro");
	//指定列表pro中option的数量
	pro.length = province.length;
	//添加元素
	for (var i = 0; i < province.length; i++) {
		pro.options[i].text = province[i];
		pro.options[i].value = i;
	}

	function ChangeProvinceSelect(index) {
		var ci = document.getElementById("ci");
		ci.length = city[index].length + 1;
		ci.options[0].text = city[0][0];
		for (var i = 0; i < city[index].length; i++) {
			ci.options[i + 1].text = city[index][i];
			ci.options[i + 1].value = city[index][i];
		}
	}
</script>
</html>